<template>
<div class="project">
  <div  class="project-select">
    <el-card class="project-select-card" shadow="never">
      <div class="project-select-param">
          项目名称:<el-input size="small" class="project-message" v-model="selectParam.projectName" placeholder="请输入项目名关键字"/>
          项目状态：<el-select size="small" class="project-message" placeholder="请选择项目状态" v-model="selectParam.projectStatus" @change="handleQuery">
             <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label">{{item.label}}</el-option>
          </el-select>
          评审时间:<el-date-picker v-model="selectParam.dateTimeChoose"
                                   @change="handleQuery"
                        class="project-message choose-date"
                        size="small" type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" size="small" class="role-select-button" icon="el-icon-search" @click="handleQuery">查询</el-button>
      </div>
    </el-card>
  </div>
  <div  class="project-info">
    <el-card shadow="never" class="project-info-card">
      <div class="project-info-button">
        <el-button type="primary" size="mini" @click="openAddProjectDialog">+添加</el-button>
        <el-button type="danger" size="mini">批量删除</el-button>
      </div>
      <div class="project-info-table">
        <el-table border stripe fit v-loading="loading" :data="projectTableData" :cell-style="cellStyle" :header-cell-style="cellStyle">
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column  prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
          <el-table-column  prop="projectType" label="项目类型" show-overflow-tooltip></el-table-column>
          <el-table-column prop="projectLocation" label="项目地址" show-overflow-tooltip></el-table-column>
          <el-table-column  prop="projectContact" label="联系方式" show-overflow-tooltip></el-table-column>
          <el-table-column  prop="projectStatus" label="项目状态" show-overflow-tooltip>
            <template v-slot="scope">
              <el-tag :type="statusTagType(scope.row.projectStatus)" >{{statusShowOptions[scope.row.projectStatus]}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column  prop="projectReviewTime" label="评审时间" show-overflow-tooltip></el-table-column>
          <el-table-column  prop="projectScore" label="项目评分" show-overflow-tooltip>
            <template v-slot="scope">
              <span style="color: #C0C4CC" v-show="scope.row.projectScore===null">暂无评分</span>
              <el-rate  v-show="scope.row.projectScore" v-model="scope.row.projectScore===null?5:scope.row.projectScore" disabled show-score
                       text-color="#ff9900" :max=5>
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template v-slot="scope">
              <el-button type="text" size="mini" @click="openShowProjectDialog(scope.row.id)">查看</el-button>
              <el-button type="text" size="mini" v-show="scope.row.projectStatus===0" @click="openEditProjectDialog(scope.row.id)">编辑</el-button>
              <el-button type="text" size="mini" style="color: red" v-show="scope.row.projectStatus<2">删除</el-button>
              <el-button type="text" size="mini" style="color: red" v-show="scope.row.projectStatus<=3" @click="cancelProject(scope.row.id)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--    分页组件-->
        <el-pagination :page-sizes="[5, 8, 10,20,50]" :page-size="this.pagination.pageSize" :current-page="this.pagination.page" :total="this.pagination.total"
                       layout="total, sizes, prev, pager, next, jumper"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>
<!--    登记项目窗口-->
    <EditProject/>
    <ShowProject/>
  </div>
</div>
</template>
<script>
import { CancelProjectApi, GetProjectPageApi } from '@/request/project/project-api'
import store from '@/store'
import EditProject from '@/components/Project/EditProject.vue'
import ShowProject from '@/components/Project/ShowProject.vue'
export default {
  components:{
    EditProject,ShowProject
  },
  created () {
    this.init()
  },
  data(){
    return{
      statusOptions:[
        {value:'0',label:'已登记'},
        {value:'1',label:'已设置条件,未抽取'},
        {value:'2',label:'已抽取'},
        {value:'3',label:'待评审'},
        {value:'4',label:'已评审'},
        {value:'5',label:'抽取失败'},
        {value:'6',label:'已取消'},
      ],
      statusShowOptions:['已登记','已设置条件,未抽取','已抽取','待评审','已评审','抽取失败','已取消'],
      statusTagTypes:['','','warning','warning','success','danger','info'],
      selectParam:{
        projectName:null,
        projectStatus:null,
        dateTimeChoose:[],
      },
      loading:false,
      pagination:{
        page:0,
        pageSize:10,
        total:0
      },
      projectTableData:[]
    }
  },
  methods:{
    //初始化页面
    async init () {
      //初始化页面数据
      this.loading = true
      //初始化参数
      const param = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
        projectName: this.selectParam.projectName ? this.selectParam.projectName : undefined,
        projectStatus: this.selectParam.projectStatus ? parseInt(this.selectParam.projectStatus) : undefined,
        beginTime:this.selectParam.dateTimeChoose?this.selectParam.dateTimeChoose.length === 2 ? this.selectParam.dateTimeChoose[0] : undefined:undefined,
        endTime: this.selectParam.dateTimeChoose?this.selectParam.dateTimeChoose.length === 2 ? this.selectParam.dateTimeChoose[1] : undefined:undefined
      }
      let res = await GetProjectPageApi(param)
      if (res&&res.code===200){
        this.projectTableData=res.data.records
        this.pagination.total = res.data.total
      }else {
        this.$message.error(res.msg?res.msg:"初始化数据失败")
      }
      this.loading=false
    },
    async cancelProject (id) {
      this.$confirm('确定取消该项目评审吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(async () => {
        let res = await CancelProjectApi(id)
        if (res && res.code === 200) {
          this.$message.success("修改状态成功")
          await this.init()
        } else {
          this.$message.error(res.msg ? res.msg : "修改失败")
        }
      }).catch((e) => {
        if (e === 'cancel') {
          if (e === 'cancel') {
          }
        }
      })

    },
    //打开添加项目的界面
    openAddProjectDialog(){
      store.commit('ProjectEdit/changeEditProjectSync',true)
    },
    //打开修改项目信息页面
    openEditProjectDialog (id) {
      store.commit('ProjectEdit/changeEditProjectSync',true)
      store.commit('ProjectEdit/changeEditProjectId',id)
    },
    //打开展示项目信息
    openShowProjectDialog(id){
      store.commit('ProjectEdit/changeShowProjectId',id)
      store.commit('ProjectEdit/changeShowProjectSync',true)
    },
    //返回状态的标签样式
    statusTagType(status){
      return  this.statusTagTypes[status]
    },
    //处理表格内容居中
    cellStyle(){
      return "text-align:center"
    },
    //查询功能
    handleQuery(){
      this.pagination.page=1
      this.init()
    },
    //处理pageSize变化
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.init()
    },
    //处理page变化
    handleCurrentChange (val) {
      this.pagination.page = val
      this.init()
    },
  }
}
</script>
<style scoped lang="less">
.project{
  display: flex;
  width: 100%;
  flex-direction: column;
  .project-select{
    width: 100%;
    .project-select-card{
      .project-select-param{
        font-size: 14px;
        margin-left: 20px;
        .project-message{
          width: 180px;
          margin-right: 30px;
        }
        .choose-date{
          width: 300px;
        }
        /deep/ .choose-date .el-range-input{
          width: 120px;
        }
      }
    }
  }
  .project-info{
    margin: 20px 0;
    width: 100%;
    .project-info-card{
      .project-info-button{
        float: right;
        margin: 5px 0 10px 10px;
      }
      .project-info-table{
        .el-pagination {
          text-align: center;
          margin: 15px;
        }
      }
    }
  }
}




</style>
